{% load i18n %}
<script src="/static/lib/jquery.dataTables.min.js" type="text/javascript"></script>
<link type="text/css" href="/static/css/dataTables.bootstrap.css" rel="stylesheet"/>
<script src="/static/lib/dataTables.bootstrap.js"></script>

<script>
    var tabledata_data = []

    $(document).ready(function() {
        init_data_table()
        get_curr_market()
        //set_timer()
    });

    function init_data_table()
    {
        $('#markets_index').DataTable({
            "paging": false, // 禁止分页
            "bInfo" : false, //是否显示页脚信息，DataTables插件左下角显示记录数
            "dom": 't'
        });
        //#
        init_search()

        $("#markets_index").on("click","tr td:nth-child(2)", tourl);
        $("#markets_index").on("click","tr td:nth-child(3)", tourl);
        $("#markets_index").on("click","tr td:nth-child(4)", tourl);
        $("#markets_index").on("click","tr td:nth-child(5)", tourl);
        $("#markets_index").on("click","tr td:nth-child(6)", tourl);
    }

    function tourl(e){//给tr或者td添加click事件
        var table = $('#markets_index').DataTable();
        var data=table.row(this).data();//获取值的对象数据
        var symbol = data[1]
        console.log(symbol)
        var quote = symbol.split('\/')
        var coin_type = quote[0]
        var use_coin_type = quote[1]
        window.location.href="/btc/trade?type=" + coin_type.toLowerCase() +"2" + use_coin_type.toLowerCase()
    }

    function get_curr_market()
    {
        $.post("/btc/get_curr_market", {}, function(jsonobj){
            refresh_markets_left(jsonobj)
        })
    }

    function set_timer()
    {
        var market = setInterval(get_curr_market, 3000);
    }

    //
    function init_search()
    {
        $("#search").keyup(function(){
            var search_key = $("#search").val()
            //console.log(search_key)
            var table = $('#markets_index').DataTable();
            table.search(search_key).draw();
        });
    }

    function refresh_markets_left(jsonobj)
    {
        // Sort by column 1 and then re-draw
        //table.draw( false );
        $('#markets_index').dataTable().fnClearTable();
        $('#markets_index').dataTable().fnAddData(markets_left_pack_data(jsonobj), true); //刷下表格
        var table = $('#markets_index').DataTable();
        tabledata_data = table.rows().data();//获取值的对象数据
        // markets_left_pack_data(jsonobj)
    }
    function markets_left_pack_data(jsonobj)
    {
        // todo order by use_coin_type
        var data = []
        for (i = 0; i < jsonobj.length; i++)
        {
            var info = jsonobj[i];
            if (info.use_coin_type == 'bitcny')
            {
                var list = []
                var tofixed = coin_tofixed(info.use_coin_type)

                var icon_img = g_coin_info[info.coin_type].icon_img

                var percent = 0
                if (info.curr != info.open)
                {
                    percent = (info.curr - info.open) * 100 / info.open
                    tofixed = coin_tofixed(info.use_coin_type)
                    percent = floor_number(percent, tofixed)
                }
                percent_html = "<span class=\"green\">0.00%</span>"
                if (percent > 0) {
                }
                else {
                }

                var tofixed0 = coin_tofixed(info.coin_type)
                var tofixed1 = coin_tofixed(info.use_coin_type)

                var curr = info.curr.toFixed(tofixed1)
                var volume = info.volume * info.curr
                volume = volume.toFixed(tofixed1)

                var heigh= info.high.toFixed(tofixed1)
                var low = info.low.toFixed(tofixed1)
                curr = Calculate.CommaFormattedOnly(curr)

                var high = Calculate.CommaFormattedOnly(high)
                var low = Calculate.CommaFormattedOnly(low)
                volume = Calculate.CommaFormattedOnly(volume)

                var  td1 = "<span class=\"icon-default\"  data-sym=\"ETHBTC\"></span>"
                var  td2 = g_coin_info[info.coin_type].name_upper + "/" + g_coin_info[info.use_coin_type].name_upper
                var  td3 = curr
                if (info.arrow == 1)
                {
                    td3 = "<span class=\"red\" >" + curr + "</span>" + "<i = class=\"fa fa-arrow-up red\" ></i>";
                }
                if (info.arrow == 2)
                {
                    td3 = "<span class=\"green\" >" + curr + "</span>" +
                    "<i = class=\"fa fa-arrow-up green\" ></i>";
                }

                var td4 = "<span class=\"green\">0.00%</span>"
                if (percent > 0) {
                    td4 = "<span class=\"red f-right\">+"+percent+"%</span>"
                }
                else {
                    td4 = "<span class=\"green f-right\">"+percent+"%</span>"
                }
                //var td7="<a href=\"{%url 'trade'%}?type=" + info.coin_type + "2" + info.use_coin_type + "\" class=\"btn btn-block btn-success\">{% trans '马上交易'%}</a>"
                var  td5 = heigh
                var  td6 = low
                var  td7 = volume
                list.push(td1)
                list.push(td2)
                list.push(td3)
                list.push(td4)
                list.push(td5)
                list.push(td6)
                list.push(td7)
                data.push(list)
            }
        }
        return data
    }

    function str_cmp(key1, key2) {
        //console.log("----------key1", key1)
        //console.log("----------key2", key2)
        var arr = key1.split('/')
        //console.log("----------arr[0]", arr[0])
        //console.log("----------arr[1]", arr[1])
        if (arr.length != 2) {
            return false
        }
        if (arr[1] == key2) {
            return true
        }
    }

    function changMarkets(arg)
    {
        console.log(tabledata_data)
        var search_key = arg
        var table = $('#markets_index').DataTable();
        var old_data = table.rows().data()

        var data = tabledata_data
        var is_selected = false

        var id_key = "#ID_"+ arg
        if ($(id_key).hasClass("cur")) {
            is_selected = true
            $(id_key).removeClass("cur")
//            console.log("============" +  id_key)
            if ($(id_key).hasClass("cur")) {
                console.log("no remove" +  id_key)
            }
        }

        if (is_selected) {
            newdata = []
            for (i = 0; i < data.length; i++) {
                row = data[i]
                newdata.push(row)
            }
            $('#markets_index').dataTable().fnClearTable();
            if (newdata.length > 0)
                $('#markets_index').dataTable().fnAddData(newdata, true); //刷下表格
            return
        }

        newdata = []
        for (i = 0; i < data.length; i++) {
            row = data[i]
            //console.log(row[1])
            if (str_cmp(row[1], arg)) {
                newdata.push(row)
            }
        }
        $('#markets_index').dataTable().fnClearTable();
        if (newdata.length > 0)
            $('#markets_index').dataTable().fnAddData(newdata, true); //刷下表格
    }
</script>
<!--begin markets-->
<div class="container">
    <div class="markets-table wh_1200">
        <div class="markets-cate">
            <ul class="cate-info">
                <li  class="cate-li" data-curMarket="" onclick="changMarkets('star')"><span class="optional-icon"></span>{% trans '自选' %}</li>
                <li id="ID_BITCNY" class="cate-li cur" data-curMarket="BITCNY" onclick="changMarkets('BITCNY')">BITCNY{% trans '市场' %}</li>
                <li id="ID_BTC" class="cate-li" data-curMarket="BTC" onclick="changMarkets('BTC')">BTC{% trans '市场' %}</li>
                <li id="ID_ETH" class="cate-li" data-curMarket="ETH" onclick="changMarkets('ETH')">ETH{% trans '市场' %}</li>
                <li id="ID_USDT" class="cate-li" data-curMarket="USDT" onclick="changMarkets('USDT')">USDT{% trans '市场' %}</li>
            </ul>
            <div class="markets-filters">
                <i class="filters-icon"></i>
                <input id="search" type="text" class="marketsKeyWords"/>
            </div>
        </div>
        <div class="table-content">
            <table id="markets_index" class="table" >
            <thead>
                <!--
                <colgroup style="width:2%;" ></colgroup>
                <colgroup style="width:14%;"></colgroup>
                <colgroup style="width:16%;"></colgroup>
                <colgroup style="width:16%;"></colgroup>
                <colgroup style="width:18%;"></colgroup>
                <colgroup style="width:18%;"></colgroup>
                <colgroup style="width:16%;"></colgroup>
                -->
                    <tr>
                        <th style="width:2%;"  style="padding-right:0px;"></th>
                        <th style="width:14%;"  class="f-left">{% trans '市场' %}</th>
                        <th style="width:16%;"  class="f-left">{% trans '最新价' %}</th>
                        <th style="width:16%;"  class="f-left">{% trans '24h涨跌' %}</th>
                        <th style="width:18%;"  class="f-left">{% trans '24h最高价' %}</th>
                        <th style="width:18%;"  class="f-left">{% trans '24h最低价' %}</th>
                        <th style="width:16%;"  class="f-left">{% trans '24h成交量' %}(CNY)</th>
                    </tr>
            </thead>
                <tbody>
                    <tr>
                        <td style="padding-right:0px;"><span class="icon-default"  data-sym="ETHBTC"></span></td>
                        <td class="f-left">ETH/BTC</td>
                        <td class="f-left">0.103620<span class="cnyprice">/￥5,936.12</span></td>
                        <td class="f-right"><span>-2.46%</span></td>
                        <td class="f-right">0.107500</td>
                        <td class="f-right">0.103400</td>
                        <td class="f-right">12,271.39321677</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!--end markets-->
